$(function () {
    //1.显示隐藏电梯导航   --淡入淡出
    //页面卷去的头部=今日推荐距离顶部的距离
    var recTop = $('.recommend').offset().top;
    // change();

    //切换侧边导航的状态
    function change() {
        if ($(document).scrollTop() >= recTop) {
            console.log(recTop);
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    }

    //页面滚动事件
    $(document).scroll(function () {
        change();

        // 2. 页面滑到相对应的内容区域 导航栏选项li添加或删除类
        // 通过内容区域索引号 找到导航栏选项的索引
        $(".floor .w").each(function (i, ele) {
            if ($(document).scrollTop() >= $(ele).offset().top) {
                $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
            }
        })
    })

    // 2. 点击li页面跳转到对应的区域
    $('.fixedtool li').click(function () {
        // 获取当前被点击的li的索引号
        var index = $(this).index();
        var currentLocation = $(".floor .w").eq(index).offset().top;
        // 页面跳转的比较生硬，可以采取动画来做跳转
        // $("html,body").scrollTop(currentLocation);
        // (1)要记住：只有元素才有动画 
        $('html,body').stop().animate({
            scrollTop: currentLocation
        })
        // (2)同时选中的选项添加类
        $(this).addClass('current').siblings('li').removeClass('current');
    })

})